// 背景透明 用于跳转页面式弹窗（仅app端可用）
page {
  background: transparent;
}
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
s,
strong,
button,
input,
select,
textarea,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
canvas,
footer,
header,
menu,
nav,
section,
audio,
video {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 100%;
  font: inherit;
  -webkit-font-smoothing: subpixel-antialiased;
}

:focus {
  outline: none;
}

h6,
h5,
h4,
h3,
h2,
h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  color: var(--text-color-1);
}

body,
form,
ul,
ol,
dl,
dd,
p {
  margin: 0;
}

ul,
ol {
  list-style-type: none;
  padding: 0;
}

image {
  border: none;
  vertical-align: bottom;
}

button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  padding: 0;
}

/* margin */
@for $i from 0 through 30 {
  .m#{ 8 * $i } {
    margin: 8rpx * $i;
  }
}

/* margin-left */
@for $i from 0 through 30 {
  .ml#{ 8 * $i } {
    margin-left: 8rpx * $i;
  }
}

/* margin-right */
@for $i from 0 through 30 {
  .mr#{ 8 * $i } {
    margin-right: 8rpx * $i;
  }
}

/* margin-top */
@for $i from 0 through 30 {
  .mt#{ 8 * $i } {
    margin-top: 8rpx * $i;
  }
}

/* margin-bottom */
@for $i from 0 through 30 {
  .mb#{ 8 * $i } {
    margin-bottom: 8rpx * $i;
  }
}

/* padding */
@for $i from 0 through 30 {
  .p#{ 8 * $i } {
    padding: 8rpx * $i;
  }
}

/* padding-left */
@for $i from 0 through 30 {
  .pl#{ 8 * $i } {
    padding-left: 8rpx * $i;
  }
}

/* padding-right */
@for $i from 0 through 30 {
  .pr#{ 8 * $i } {
    padding-right: 8rpx * $i;
  }
}

/* padding-top */
@for $i from 0 through 30 {
  .pt#{ 8 * $i } {
    padding-top: 8rpx * $i;
  }
}

/* padding-bottom */
@for $i from 0 through 30 {
  .pb#{ 8 * $i } {
    padding-bottom: 8rpx * $i;
  }
}

/*背景色[light]: #F6F7FB*/
.bg {
  background-color: var(--bg-color);
}
/*浅色背景色[light]: #FFFFFF*/
.bg-light {
  background-color: var(--bg-light-color);
}
/*一级文字[light]: #303133*/
.c303 {
  color: var(--text-color-1);
}
/*二级文字[light]: #606266*/
.c606 {
  color: var(--text-color-2);
}
/*三级文字[light]: #909399*/
.c909 {
  color: var(--text-color-3);
}
/*四级文字[light]: #C0C4CC*/
.c0c {
  color: var(--text-color-4);
}
.main-color {
  color: var(--main-color);
}
/* 从10px到40px */
@for $i from 5 through 20 {
  .f#{ 2 * $i } {
    font-size: 2px * $i;
  }
}

/* width 从2rpx到750rpx */
@for $i from 1 through 375 {
  .w#{ 2 * $i } {
    width: 2rpx * $i;
  }
}

/* font-weight */
.bold {
  font-weight: bold;
}

.i {
  font-style: italic;
}

/* text-align */

.tc {
  text-align: center;
}

.tr {
  text-align: right;
}

.tl {
  text-align: left;
}

.tj {
  text-align: justify;
}


/* 超行文本省略号显示 */
.show-points {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.show-points2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.show-points3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.flex {
  display: flex;
}

.flex1 {
  flex: 1;
}

.f-sb {
  justify-content: space-between;
}

.f-sa {
  justify-content: space-around;
}

.f-jc {
  justify-content: center;
}

.f-jr {
  justify-content: flex-end;
}

.f-jl {
  justify-content: flex-start;
}

.f-ac {
  align-items: center;
}

.f-ae {
  align-items: flex-end;
}

.f-as {
  align-items: flex-start;
}

.f-dr {
  flex-direction: row;
}

.f-dc {
  flex-direction: column;
}

.f-drr {
  flex-direction: row-reverse;
}

.f-dcr {
  flex-direction: column-reverse;
}

.f-wrap {
  flex-wrap: wrap;
}

.f-nowrap {
  flex-wrap: nowrap;
}

.f-nowrap {
  flex-wrap: nowrap;
}

.link {
  cursor: pointer;
}

/* 英文数字等换行 */
.word-break {
  word-break: break-all;
}

/* 圆角 */
.radius {
  border-radius: 8rpx; // 4px
}

.radius-2 {
  border-radius: 16rpx; // 8px
}

.link-text {
  text-decoration: none;
  color: var(--main-color);
}
